<!-- 分类 -->
<template>
	<view class="category-box">
		<!-- #ifdef H5 -->
		<view class="header" :style="{backgroundColor:color}">
			<view class="serch-wrapper flex">
				<view class="logo">
					<!-- <image :src="logoUrl" mode=""></image> -->
					<text style="color:#FFFFFF;font-weight: bold;"> {{$APP_NAME}} </text>
				</view>
				<view class="input">
					
				</view>
			<!-- 	<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
						class="iconfont icon-xiazai5"></text>
					搜索商品</navigator> -->
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="mp-header" :style="{backgroundColor:color,paddingTop:statusBarHeight + 'px'}">
			<view class="serch-box" style="height: 40px;">
				<view class="serch-wrapper flex">
					<view class="logo">
						<!-- <image :src="logoUrl" mode=""></image> -->
						<text style="color:#FFFFFF;font-weight: bold; font-size: 34rpx; marginLeft: 23rpx;"> {{$APP_NAME}} </text>
					</view>
					<view class="input">
						
					</view>
				<!-- 	<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
							class="iconfont icon-xiazai5"></text>
						搜索商品</navigator> -->
				</view>
			</view>
		</view>
		<!-- #endif -->
		 <!-- nav -->
		<view class="nav">
			<!-- <view class="nav-type"> -->
				<scroll-view class="nav-type" scroll-x="true" style="background: linear-gradient(239deg, #FADFE9 0%, #EAFDFF 100%);">
					<view class="type" v-for="(item, index) in categoryData" @tap="typeTap(index)" :key="index">
						<view class="type-img">
							<image mode="scaleToFill" class="nav_img" :src="item.image"/>
						</view>
						<view :class="[typeIndex==index?'type-activeT':'type-active']" :style="{'background':typeIndex==index?$COLOR:''}">
						  <text>{{item.title}}</text>
						</view>
					</view>
				</scroll-view>
			<!-- </view> -->
		</view>
		<!-- 三级分类 -->
		<three-catgory :childrenList="childrenList" v-if="categoryType === 4"></three-catgory>
		<!-- 二级分类 -->
		<!-- <two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory> -->
		<!-- 一级分类-->
		<!-- <one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory> -->
		<!--直接购买，点餐 -->
		<!-- <takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory> -->
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import takeoutCatgory from './category/takeout-catgory.vue';
import threeCatgory from './category/three-catgory.vue';
import twoCatgory from './category/two-catgory.vue';
import oneCatgory from './category/one-catgory.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		takeoutCatgory,
		threeCatgory,
		twoCatgory,
		oneCatgory
	},
	data() {
		return {
			categoryType: 4, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			// categoryStyleId: 0 ,//分类Id
			categoryData:[],
			statusBarHeight: systemInfo.statusBarHeight,
			childrenList:[],
			color:this.$COLOR,
			logoUrl:this.$APP_LOGO,
			typeIndex:0
		};
	},
	computed: {
		...mapGetters(['authType'])
	},
	onLoad() {
		this.getCategory();
	},
	methods: {
		/**
		 * 获取分类数据
		 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
		 */
		getCategory() {
			this.$http('category.detail').then(res => {
				if (res.code === 200) {
					this.categoryData = res.data.reverse();
					this.categoryData.forEach(item=>{
					  item.childrenList = item.childrenList.reverse();
					})
					this.childrenList = this.categoryData[0].childrenList;
					console.log('分类',this.categoryData)
				}
			});
		},
		 // 分类点击
		typeTap(index){
			this.childrenList = this.categoryData[index].childrenList;
			console.log(this.childrenList)
			this.typeIndex = index
		},
	}
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
}
/* nav */
.nav {
    /* margin-top: 20rpx; */
    width: 100%;
    /* height: 460rpx; */
    background-color: #fff;
    
    transition:all 1s linear;
    /* border-bottom: 1rpx solid #eee; */
}

.nav-type {
    width: 100%;
    height: 196rpx;
    padding: 32rpx 32rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    /* background: linear-gradient(239deg, #FADFE9 0%, #EAFDFF 100%); */
	background-color: #fff;
}
.type-active{
    width: 112rpx;
    height: 36rpx;
    font-size: 24rpx;
    color: #333;
    line-height: 36rpx;
    text-align: center;
    font-weight: 400;
    margin: 20rpx auto 0;
}

.type{
    width: 140rpx;
	display: inline-block;
    // margin-right: 30rpx;
}
.type-active{
    width: 112rpx;
    height: 36rpx;
    font-size: 24rpx;
    color: #333;
    line-height: 36rpx;
    text-align: center;
    font-weight: 400;
    margin: 20rpx auto 0;
}
.type-activeT{
     width: 112rpx;
       height: 36rpx;
       background: linear-gradient(174deg, #33A0FF 0%, #347AFF 100%);
       border-radius: 18rpx;
       font-size: 22rpx;
       color: #FFFFFF;
       line-height: 36rpx;
       text-align: center;
       font-weight: 400;
       margin: 20rpx auto 0;
}
.type-img{
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.nav_img{
  width:100%;
  height:100%;
  border-radius:50%;
}
.page-index {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
}
.header {
	width: 100%;
	// background-color: $theme-color;
	padding: 28rpx 30rpx;

}
.serch-wrapper {
	align-items: center;
}
.logo {
	width: 500rpx;
	height: 42rpx;
	margin-right: 24rpx;
}
image {
	width: 118rpx;
	height: 42rpx;
}
				
.input {
	display: flex;
	align-items: center;
	width: 546rpx;
	height: 58rpx;
	
}
				
.iconfont {
	margin-right: 20rpx;
	font-size: 26rpx;
	color: #666666;
}
			
				
.tabNav {
	padding-top: 24rpx;
}
	.page_content {
		background-color: #f5f5f5;
		/* #ifdef H5 */
		// margin-top: 20rpx !important;
		/* #endif */
		padding: 0 30rpx;
					}
.swiper {
	position: relative;
	width: 100%;
	height: 280rpx;
	margin: 0 auto;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 25rpx;
	/* #ifdef MP */
	z-index: 10;
	margin-top: 20rpx;

	/* #endif */
	swiper,
	.swiper-item,
	image {
		width: 100%;
		height: 280rpx;
		border-radius: 10rpx;
	}
}
.mp-bg {
		position: absolute;
		left: 0;
		/* #ifdef H5 */
		top: 98rpx;
		/* #endif */
		width: 100%;
		height: 380rpx;
		// background: linear-gradient(180deg, #E93323 0%, #F5F5F5 100%, #751A12 100%);
		// border-radius: 0 0 30rpx 30rpx;
	}
	
/* #ifdef MP */
.mp-header {
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	/* #ifdef H5 */
	padding-bottom: 20rpx;
	/* #endif */
	background-color: $theme-color;
}

/* #endif */
</style>
